<template>
    <div class="my-root">
        <div class="my-root-box">
        <div class="my-header">
            <div class="head-portrait"></div>
        </div>
        <div class="log-reg">
                <router-link to="">登录</router-link>/<router-link to="">注册</router-link> 
        </div>
        <div class="log-pri">
            <img src="/img/login.png">
            <span>登录享受更多特权</span>
        </div>
        <div class="c-p-a-box">  
            <div class="c-p-a">
                <div>
                <p>0</p>
                <p>收&nbsp;藏</p>
                </div>
                <span>|</span>
                <div>
                <p>0</p>
                <p>发&nbsp;表</p>
                </div>
                <span>|</span>
                <div>
                <p>0</p>
                <p>关&nbsp;注</p>
                </div>    
            </div> 
        </div>
        <div class="my-items">
            <router-link to="/home/mine/means">
                <div class="my-item">
                    <img class="img1" src="/img/我的资产.png">
                    <span>我的资产</span>
                    <img class="img2" src="/img/arrow.png">
                </div>
            </router-link>
            <router-link to="/home/mine/histories">
                <div class="my-item">
                    <img class="img1" src="/img/历史记录.png">
                    <span>历史记录</span>
                    <img class="img2" src="/img/arrow.png">
                </div>
            </router-link>
            <router-link to="">
                <div class="my-item">
                    <img class="img1" src="/img/我的订单.png">
                    <span>我的订单</span>
                    <img class="img2" src="/img/arrow.png">
                </div>
           </router-link>
            <router-link to="/home/mine/download">
                <div class="my-item my-item-last">
                    <img class="img1" src="/img/我的下载.png">
                    <span>我的下载</span>
                    <img class="img2" src="/img/arrow.png">
                </div>
            </router-link>
        </div>
        </div>
        <Tabbar></Tabbar>  
    </div>
</template>

<script>
import Tabbar from "../components/Tabbar.vue"
export default{
    components:{
        Tabbar
    },
}
</script>

<style scoped>
    a{
        color: black;
        text-decoration: none !important;
    }
    .my-root{
        height: 100vh;
    }
    .my-root-box{
        height: calc( 100vh - 13.3vw);
        overflow-y: scroll;
    }
    .my-header{
        height: 48.8vw;
        background-image: url(/img/notlogin.png);
        background-size: 100% 100%;
    }
    .head-portrait{
        width: 21.9vw;
        height: 21.9vw;
        border-radius: 50%;
        background-color: #ffffff;
        margin: 0 auto;
        position: relative;
        top: 10vw;
    }
    .log-reg{
        margin-top:2vw;
        text-align: center;
        font-weight:bold;
        font-size:5vw;
        
    }
    .log-pri{
        text-align: center;
        color: #999999; 
        margin-top:3.5vw;
        margin-bottom:5.3vw;  
    }
    .log-pri img{
        width: 4vw;
    }
    .log-pri span{
        margin-left: 2vw;
        position: relative;
        top: -1.5vw;
        font-size:3vw; 
    }
    .c-p-a-box{
        width: 60vw;
        margin: 0 auto;
    }
    .c-p-a{
        display: flex;
        text-align: center;
        justify-content: space-between;
        color: #999999;
        font-size:4.3vw; 
        
    }
    .my-items{
        margin-top:10.7vw; 
    }
    .my-item{
        height:16.5vw;
        border-top: 1px solid #eeeeee; 
    }
    .my-item img{
        height: 5.5vw;
        margin-top:6.3vw; 
    }
    .img1{
        margin-left:3.9vw;
        margin-right:4.1vw;
    }
    .img2{
        position: relative;
        left:63vw;
        transform:scale(0.8)
    }
    .my-item span {
        position: relative;
        top: -1.5vw;
        font-size:4.3vw;
    }
    .my-item-last{
        border-bottom: 1px solid #eeeeee; 
    }
    
   
 
</style>